<template>
  <nav>  <!-- 页面导航栏 -->
    <div>  <!-- 为了便于隐藏滚动条加入div-->
      <!-- 首页 -->
      <div class="nav-menu" v-for="(item ,index) in links">
        <p class="nav-menu-title ">{{item.text}}</p>
        <div class="nav-menu-content fs-12">
          <p class="lh-32"
             v-for="(itemChild,itemIndex) in item.child"
             :class="[itemIndex == item.childMenuSelect ? itemChild.selectClass:itemChild.class]"
             @click="$goRoute(itemChild.page);childPageChange(itemIndex,index)">
            {{itemChild.text}}</p>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
  import com from '../../js/common'
  import {bus} from '../../js/brothersBus'

  export default {
    name: 'Nav',
    created() {
      if (!com.getStore('pagePowers')) {
        com.setStore('pagePowers', JSON.stringify({}))
      }
      this.anyMenuList()
      // 解析所有页面的权限
      this.anyPagePower()
      bus.$on('anyMenuList', () => {
        this.anyMenuList()
      })
      // 修改icon位置
      bus.$on('setMenuSelect', (param) => {
        this.setMenuSelect()
      })
    },
    data() {
      return {
        menuSelect: -1,
        links: [],
        powerObj: {}
      }
    },
    methods: {
      // 解析菜单栏数据
      anyMenuList() {
        const menuList = JSON.parse(com.getStore('menuList'))
        // 引用所有code地址
        let obj = {}
        let menuSetList = []
        menuList.map((currentValue) => {
          // 将当前code存储于map中
          let code = currentValue.code
          obj[code] = currentValue
          // 头部板块直接不引入
          // 根据code值长度为3时直接push,靠引用
          if (currentValue.code.length === 3) {
            if (currentValue.code === '001') {
              obj[code].childMenuSelect = 0
            } else {
              obj[code].childMenuSelect = -1
            }
            obj[code].text = currentValue.name
            if (currentValue.code !== '000') {
              menuSetList.push(obj[code])
            }
          } else {

            obj[code].text = currentValue.name
            if (code.length === 6) {
              obj[code].class = `nav-icon-${currentValue.description}`
              obj[code].selectClass = `nav-menu-content-select nav-icon-select-${currentValue.description}`
            }
            let parentid = currentValue.code.substring(0, currentValue.code.length - 3)
            if (obj[parentid].child) {
              obj[parentid].child.push(currentValue)
            }
            else {
              obj[parentid].child = []
              obj[parentid].child.push(currentValue)
            }
          }

        })
        this.links = menuSetList
        this.powerObj = obj
        this.setMenuSelect()
      },
      // 解析单个页面的权限判断
      anyPagePower() {
        const pagePowers = {}
        // 遍历对象生成数组
        const attrArr = Object.keys(this.powerObj)
        attrArr.map((v) => {
          if (v.length >= 6 && this.powerObj[v].child) {
            pagePowers[v] = this.resolveData(this.powerObj[v].child, pagePowers)
          }
          if (v === '006002') {
            pagePowers[v] = true
          }
          if (v === '002002') {
            pagePowers[v] = true
          }
          if (v === '000001') {
            pagePowers[v] = true
          }
        })
        com.setStore('pagePowers', JSON.stringify(pagePowers))
      },

      // 函数遍历子子孙孙页面权限
      resolveData(arr, resObj, attr = 'child', code = 'code') {
        // 传入一个数组,当此数组元素下面某属性还是有数组时,递归调用
        const obj = {}
        arr.map((v) => {
          obj[v[code]] = true
          if (v[attr]) {
            resObj[v[code]] = this.resolveData(v[attr], resObj)
          }
        })
        return obj
      },
      // childIndex 下级目录索引 index的上级目录索引
      childPageChange(childIndex, index) {
        this.links.map((v) => {
          v.childMenuSelect = -1
        })

        this.links[index].childMenuSelect = childIndex;

        // 存储当前选择中的板块
        com.setStore('menuSelect', childIndex + ',' + index)
        /*   // 获取每个页面标志性code
           const childPage = this.links[index].child[childIndex]
           const childCode = childPage.code
           if (childPage.child) {
             const pagePowers = JSON.parse(com.getStore('pagePowers'))
             pagePowers[childCode] = this.resolveData(childPage.child, pagePowers)
             console.log(pagePowers)
             com.setStore('pagePowers', JSON.stringify(pagePowers))
           }*/
      },

      // 设置页面左侧菜单栏选中与否
      setMenuSelect() {
        // 选中的栏目
        const menuSelectArr = com.getStore('menuSelect').split(',')
        this.links.map((v) => {
          v.childMenuSelect = -1
        })
        this.links[Number(menuSelectArr[1])].childMenuSelect = Number(menuSelectArr[0])
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import "nav.scss";
</style>
